<template>
    <div>
        <div class="string-header">
            <el-input v-model="stringInfo.key" size="small" :placeholder="$t('RedisOperating.PleaseEnterTheKey')">
                <template slot="prepend">string</template>
                <el-button slot="append" icon="el-icon-check" @click="reNameKey"></el-button>
            </el-input>
            <el-input v-model="stringInfo.ttl" size="small">
                <template slot="prepend">TTL</template>
                <el-button slot="append" icon="el-icon-check" @click="setExpired"></el-button>
            </el-input>
            <el-button type="success" icon="el-icon-refresh" circle @click="refresh"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="delKey"></el-button>
        </div>
        <div class="string-viewType">
            <el-select v-model="viewType" :placeholder="$t('addKey.PleaseChoose')" size="small" @change="choseView">
                <el-option
                v-for="item in viewTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" :disabled="canFormat" size="small" @click="jsonFormat">{{$t('RedisOperating.format')}}</el-button>
        </div>
        <div class="string-value">
            <editor v-model="stringInfo.content" :options="options" @init="editorInit" :lang="viewType" theme="chrome" style="font-size:13px;">
            </editor>
        </div>
        <el-button type="primary" icon="el-icon-check" style="margin-top:10px;" @click="save">{{$t('RedisOperating.save')}}</el-button>
    </div>
</template>

<script>
import storage from '../../redis/storage'
export default {
    props:['tab'],
    components:{
        editor:require('vue2-ace-editor')
    },
    data(){
        return {
            tempKey:this.tab.key,
            viewType:"text",
            viewTypes:[
                {label:"text",value:"text"},
                {label:"json",value:"json"}
            ],
            options:{
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true,
                tabSize:1
            },
            canFormat:true,
            stringInfo:{
                key:this.tab.key===undefined?"":this.tab.key,
                ttl:-1,
                content:'',
            }
        }
    },
    created(){
        this.refresh();
    },
    methods:{
        editorInit(){
            require('brace/mode/text')
            require('brace/mode/json')
            require('brace/theme/chrome')
            require('brace/ext/language_tools')
        },
        choseView(view){
            if(view==='json'){
                this.canFormat=false;
            }
        },
        jsonFormat(){
            this.stringInfo.content=JSON.stringify(JSON.parse(this.stringInfo.content), null, 2);
        },
        save(){
            if(this.stringInfo.key&&this.stringInfo.content){
                let client=storage.get('client')[this.tab.serverIdx]
                client.existsAsync(this.stringInfo.key).then(res=>{
                     if(res===1&&!this.tempKey){
                        this.$message({
                            type:"warning",
                            message:this.$t('RedisOperating.keyExists')
                        })
                    }else{
                        if(this.tempKey){
                            this.stringInfo.key=this.tempKey
                        }
                        client.setAsync(this.stringInfo.key,this.stringInfo.content).then(res=>{
                            if(res==='OK'){
                                this.$message({
                                    type:'success',
                                    message:this.$t('RedisOperating.saveSuccess')
                                })
                                if(!this.tempKey){
                                    this.$emit('addSuccessCall',this.stringInfo.key,this.tab)
                                }
                            }
                        })
                    }
                })
            }else{
                this.$message({
                    type:"warning",
                    message:this.$t('RedisOperating.keyAndValueCannotBeEmpty')
                })
            }
        },
        setExpired(){
            if(this.tempKey){
                let client=storage.get('client')[this.tab.serverIdx]
                client.expireAsync(this.tempKey,this.stringInfo.ttl).then(res=>{
                    if(res===1){
                        this.$message({
                            type:'success',
                            message:this.$t('RedisOperating.ExpirationTimeSetSuccessfully')
                        })
                    }
                })
            }
        },
        reNameKey(){
            if(this.tempKey&&this.tempKey!==this.stringInfo.key){
                let client=storage.get('client')[this.tab.serverIdx]
                client.existsAsync(this.stringInfo.key).then(res=>{
                    if(res===0){
                       client.renameAsync(this.tempKey,this.stringInfo.key).then(res=>{
                            if(res==='OK'){
                                this.tempKey=this.stringInfo.key
                                this.$emit('updateKeyName',storage.get('item')[this.tab.serverIdx],this.tab,this.stringInfo.key)
                                this.$message({
                                    type:'success',
                                    message:this.$t('RedisOperating.ReNameSuccess')
                                })
                            }
                         })
                    }else{
                        this.stringInfo.key=this.tempKey
                        this.$message({
                            type:"warning",
                            message:this.$t('RedisOperating.keyExists')
                        })
                    }
                })
            }
        },
        refresh(){
            if(this.tempKey){
                this.stringInfo.key=this.tempKey;
                let client=storage.get('client')[this.tab.serverIdx]
                client.getAsync(this.stringInfo.key).then(res=>{
                    this.stringInfo.content=(res===null?'':res);
                })
                client.ttlAsync(this.stringInfo.key).then(res=>{
                    this.stringInfo.ttl=(res===-2?0:res);
                })
            }
        },
        delKey(){
            let client=storage.get('client')[this.tab.serverIdx]
            this.$confirm(this.$t('homeVue.ConfirmDeletion'), this.$t('homeVue.prompt'), {
                confirmButtonText: this.$t('FormPlaceholder.OK'),
                cancelButtonText: this.$t('FormPlaceholder.cancel'),
                type: 'warning'
            }).then(() => {
              client.delAsync(this.stringInfo.key).then(res=>{
                  if(res===1){
                      this.$message({
                        type:'success',
                        message:this.$t('RedisOperating.DeletedSuccessfully')
                      })
                      this.$emit('removeTab',this.tab.name)
                      this.$emit('delKey',storage.get('item')[this.tab.serverIdx],this.tab.index)
                  }
              })
            }).catch(() => {});
        }
    }
}
</script>

<style scoped>
.string-header .el-input{
    width: 30%;
}
.string-header .el-button+.el-button{
    margin: 0px;
}
.string-header .el-button.is-circle{
    padding: 6px;
    margin: 0px 5px;
}
.string-value{
    height: 600px;
    width: 100%;
}
.string-viewType{
    margin: 20px 0px;
}
</style>